import React, { Component } from 'react'
import Home from './page/Home';
import About from './page/About'
import Login from './page/login';
import ShoppingCar from './page/ShoppingCar';
import Event from './page/Event';
import PTC from './page/PTC';
import CTP from './page/CTP';
import CTC from './page/CTC';
import Context from './page/Context';
import Car from './page/Car';
import Life from './page/Life';
import KPL from './page/KPL';
import User from './page/User';

export default class 主页 extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[{id:1,msg:"主页",com:Home},{id:2,msg:"关于",com:About},{id:3,msg:"表单",com:Login},{id:4,msg:"购物车",com:ShoppingCar},{id:5,msg:"事件绑定",com:Event},{id:6,msg:"PTC",com:PTC},{id:7,msg:"CTP",com:CTP},{id:8,msg:"CTC",com:CTC},{id:9,msg:"跨层级",com:Context},{id:10,msg:"分离购物车",com:Car},{id:11,msg:"生命周期",com:Life},{id:12,msg:"KPL",com:KPL},{id:13,msg:"User",com:User}],
            active:1,
            com:Home
        
        }
    }
    check(item){
        this.setState({
            active:item.id,
            com:item.com
        })
    }
    
  render() {
      let Com=this.state.com;
    let itemList=this.state.list.map(item=>{return <div className={item.id==this.state.active?"item active":"item"} key={item.id} onClick={()=>{this.check(item)}}>{item.msg}</div>});
    return (
        <>
      <div>主页</div>
      <div className="nav">
          {itemList}
      </div>
      <Com></Com>
      </>
    )
  }
}
